<template>
  <div class="overviewNavigation">
   <div>
      <table>
        <tr>
          <v-NavigationItem :index="0">
             <th>余杭概况</th>
          </v-NavigationItem >
           <th class="split"></th>
         <v-NavigationItem :index="1">
           <th  >旅游资源</th>
         </v-NavigationItem >
          <th class="split"></th>
         <v-NavigationItem :index="2">
          <th  >美食特产</th>
         </v-NavigationItem>
          <th class="split"></th>
         <v-NavigationItem :index="3">
           <th >余杭符号</th>
         </v-NavigationItem>
        </tr>
      </table>
   </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("overview/navigation");
export default {
  name: "HelloWorld",
  data() {
    return {
      titke: "Welcome",
      msg: "Welcome to Your App"
    };
  },
  computed: {
    ...mapState(["current"])
  },
  mounted() {
    debugger;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.overviewNavigation {
  position: relative;
  width: 100%;
  height: 0.88rem;
  background-image: url("../assets/menu_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  div {
    width: 100%;
    height: 100%;
    table {
      font-size: 0.28rem;
      color: white;
      width: 100%;
      height: 100%;
      tr {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        .split {
          width: 0.02rem;
          height: 0.28rem;
          border-left: 0.02rem white solid;
        }
        th {
          width: 23%;
        }
        .active:after {
          content: "";
          background-image: url("../assets/btn_actived.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          position: absolute;
          width: 0.72rem;
          height: 0.24rem;
          margin-left: -0.52rem;
          margin-top: 0.24rem;
        }
      }
    }
  }
}
</style>
